/* Section ------------------ */

.section {
  position: absolute;
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  width: 100%;
  min-width: 1150px;
  height: 100%;
  overflow-x: hidden;
  /* overflow-y: auto; */
  color: var(--color-accent);

  /* Hide */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-20px);
  transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
}
.section.is-shown {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: visibility 0s 0s linear , opacity .36s ease-out, transform .36s ease-out;
}

.section h3,
.section p {
  color: var(--color);
}

.section-wrapper {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  padding: 2rem 0;
  overflow: hidden;
}

.section-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: .5em;
}

.section-operation {
  background-color:#ff6600;
  height: 50px;
}

.u-category-manager       { --color-accent: hsl(116, 30%, 36%); }
.u-category-order         { --color-accent: hsl(194, 60%, 36%); }
.u-category-user          { --color-accent: hsl(222, 53%, 50%); }
.u-category-rename        { --color-accent: hsl(285, 47%, 46%); }
.u-category-media         { --color-accent: hsl( 36, 77%, 34%); }

.resource-container{
  display: block;
  overflow: hidden;
   /* //--color-accent: hsl( 36, 77%, 34%);  */
}

.tag-pannel{
  margin: 0 0 10px 0;
  display:none;
}

.audio-resource-item{
  width: 550px;
  float:left;
  border:1px solid #ccc;
  background-color:#fff;
  border-radius: 5px;
  margin: 10px;
  box-shadow: 2px 2px 5px #ccc;
  padding-bottom: 6px;
}

.audio-resource-tags{
  float: left;
  padding: 2px 4px 4px 11px;
}

.audio-checkbox{
  float:left;
  width:18px;
  height:18px;
  margin-top:1px;
  margin-left:3px;
}

.audio-play{
  width:20px;
  float:left;
  text-align:center;
  margin-top:25px;
}

.main-container{
  width: 1150px;
  margin: auto;
}